<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src='<?php echo JRoute::_('/modules/mod_wed_form/jquery.realperson.min.js'); ?>'></script>
<script type="text/javascript" src='<?php echo JRoute::_('/modules/mod_wed_form/jquery.validate.min.js'); ?>'></script>
<script type="text/javascript">// <![CDATA[
jQuery.validator.addMethod("phone", function(phone_number, element) {
    return phone_number.match(/^\+?(\([\d\s-]+\))?[\d\s-]+$/);
});
jQuery(document).ready(function(){
	jQuery(".zakaz-slide").click(function(){
		jQuery("#panel").slideToggle("slow");
		jQuery(this).toggleClass("active"); return false;
	});
	
	jQuery("#formID").validate({
		messages: {
			cafe: "Пожалуйста, укажите название кафе/столовой",
			email: {
				required: "Пожалуйста, укажите Email",
				email: "Неверный формат Email"
			},
			phone: {
				required: "Пожалуйста, укажите телефон",
				phone: "Неверный формат телефона"
			},
			message: "Пожалуйста, заполните сообщение",
			captcha: "Пожалуйста, укажите символы с картинки"
		}
	});
	
	jQuery("#captcha").keydown(function(){
		jQuery("#notvalid").hide();
	});
	
	jQuery("#captcha").realperson({regenerate: 'Обновить картинку'});
	jQuery("#formID").submit(function(){
		
		if (jQuery("#formID").valid()){
			var params = "cafe="+encodeURIComponent(jQuery("#cafe").val());
				params += "&phone="+encodeURIComponent(jQuery("#phone").val());
				params += "&email="+encodeURIComponent(jQuery("#email").val());
				params += "&message="+encodeURIComponent(jQuery("#message").val());
				params += "&captcha="+jQuery("#captcha").val()+"&captchaHash="+jQuery(".realperson-hash").val();
			
			jQuery.ajax({
				url: "<?php echo JRoute::_('/modules/mod_wed_form/ajax.php'); ?>",
				data: params,
				type: "post",
				success: function(data){
					if (data == "captcha"){
						jQuery("#notvalid").show();
					} else {
						jQuery("#formID").hide(0);
						jQuery("#panel").append("<p style='color:green'>Спасибо! Ваш запрос принят</p>");
					}
				}
			});
		}
		
		return false;
	})
});
// ]]></script>
<style type="text/css">
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; font-size: 11pt }
.realperson-text {
	font-family: "Courier New",monospace;
	font-size: 6px;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 3px;
}
</style>

<p id="zakaz-fon">
	<a class="zakaz-slide">Добавить организацию/столовую</a>
</p>
<div id="panel">
	<form id="formID" class="formular">
			<table style="width: 500px;">
				<tr>
					<td>Название организации:</td>
					<td><input id="cafe" class="required" name="cafe" type="text" style='width:100%' /></td>
				</tr>
				<tr>
					<td>Телефон:</td>
					<td><input id="phone" class="required phone" name="phone" type="text" style='width:100%' /></td>
				</tr>
				<tr>
					<td>Email:</td>
					<td><input id="email" class="required email" name="email" type="text" style='width:100%' /></td>
				</tr>
				<tr>
					<td>Сообщение:</td>
					<td><textarea id="message" class="required" name="message" style='width:100%;height:100px'></textarea></td>
				</tr>
				<tr>
					<td style="width: 180px;">Введите символы с картинки</td>
					<td>
						<input type='text' name='captcha' class="required" id='captcha' />
						<span style='display:none;color:red' id='notvalid'>Не правильно введены символы с картинки</span>
					</td>
				</tr>
			</table>
		<input class="submit" type="submit" id="send_order" value="Отправить" />
	</form>
</div>